<div class="settings-container">
  <div class="flex align-items-center justify-content-between mb-4">
    <h1>Queue Cleaner</h1>
  </div>

  <!-- Loading/Error State Component -->
  <app-loading-error-state
    *ngIf="queueCleanerLoading() || queueCleanerLoadError()"
    [loading]="queueCleanerLoading()"
    [error]="queueCleanerLoadError()"
    loadingMessage="Loading settings..."
    errorMessage="Could not connect to server"
  ></app-loading-error-state>

  <!-- Settings Form -->
  <form *ngIf="!queueCleanerLoading() && !queueCleanerLoadError()" [formGroup]="queueCleanerForm" class="p-fluid">
    
    <p-card styleClass="settings-card h-full">
      <ng-template pTemplate="header">
        <div class="flex align-items-center justify-content-between p-3 border-bottom-1 surface-border">
          <div class="header-title-container">
            <h2 class="card-title m-0">Queue Cleaner Configuration</h2>
            <span class="card-subtitle">Configure automatic arr queue cleanup</span>
          </div>
        </div>
    </ng-template>

    <div class="card-content">
      <!-- Main Settings -->
      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('enabled')" 
             title="Click for documentation"></i>
          Enable Queue Cleaner
        </label>
        <div class="field-input">
          <p-checkbox formControlName="enabled" [binary]="true" inputId="qcEnabled"></p-checkbox>
          <small class="form-helper-text">When enabled, the queue cleaner will run according to the schedule</small>
        </div>
      </div>

      <!-- Scheduling Mode Toggle -->
      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('useAdvancedScheduling')" 
             title="Click for documentation"></i>
          Scheduling Mode
        </label>
        <div class="field-input">
          <p-selectButton
            formControlName="useAdvancedScheduling"
            [options]="scheduleModeOptions"
            optionLabel="label"
            optionValue="value"
            [allowEmpty]="false"
            [multiple]="false"
          >
          </p-selectButton>
          <small class="form-helper-text">Choose between basic scheduling or advanced cron expression</small>
        </div>
      </div>

      <!-- Basic Schedule Controls - shown when useAdvancedScheduling is false -->
      <div class="field-row" formGroupName="jobSchedule" *ngIf="!queueCleanerForm.get('useAdvancedScheduling')?.value">
        <label class="field-label">
          Run Schedule
        </label>
        <div class="field-input">
          <div class="schedule-input flex flex-wrap">
            <span class="schedule-label">Every</span>
            <p-select 
              formControlName="every"
              [options]="getScheduleValueOptions()"
              optionLabel="label"
              optionValue="value"
              placeholder="Select interval"
            ></p-select>

            <p-selectButton
              formControlName="type"
              [options]="scheduleUnitOptions"
              optionLabel="label"
              optionValue="value"
              [allowEmpty]="false"
              [multiple]="false"
            >
            </p-selectButton>
          </div>
          <small *ngIf="hasNestedError('jobSchedule', 'every', 'required')" class="form-error-text">This field is required</small>
          <small class="form-helper-text">How often the queue cleaner should run</small>
        </div>
      </div>

      <!-- Advanced Schedule Controls - shown when useAdvancedScheduling is true -->
      <div class="field-row" *ngIf="queueCleanerForm.get('useAdvancedScheduling')?.value">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon" 
             (click)="openFieldDocs('cronExpression')" 
             title="Click for documentation"></i>
          Cron Expression
        </label>
        <div class="field-input">
          <input type="text" pInputText formControlName="cronExpression" placeholder="0 0/5 * ? * * *" />
          <small *ngIf="hasMainFormError('cronExpression', 'required')" class="form-error-text">Cron expression is required</small>
          <small class="form-helper-text">Enter a valid Quartz cron expression (e.g., "0 0/5 * ? * * *" runs every 5 minutes)</small>
        </div>
      </div>

      <!-- Ignored Downloads -->
      <div class="field-row">
        <label class="field-label">
          <i class="pi pi-question-circle field-info-icon"
             (click)="openFieldDocs('ignoredDownloads')"
             title="Click for documentation">
          </i>
          Ignored Downloads
        </label>
        <div class="field-input">
          <app-mobile-autocomplete
            formControlName="ignoredDownloads"
            placeholder="Add download pattern"
          ></app-mobile-autocomplete>
          <small class="form-helper-text">Downloads matching these patterns will be ignored (e.g. hash, tag, category, label, tracker)</small>
        </div>
      </div>

      <!-- Detailed Settings in Accordion -->
      <p-accordion [multiple]="false" [value]="activeAccordionIndices" styleClass="mt-3">
        <!-- Failed Import Settings -->
        <p-accordion-panel [disabled]="!queueCleanerForm.get('enabled')?.value" [value]="0">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Failed Import Settings
              @if (sectionHasErrors(0)) {
                <i class="pi pi-exclamation-circle accordion-error-icon" title="This section has validation errors"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <div class="field-row" formGroupName="failedImport">
              <label class="field-label">
                <i class="pi pi-question-circle field-info-icon" 
                   (click)="openFieldDocs('failedImport.maxStrikes')" 
                   title="Click for documentation"></i>
                Max Strikes
              </label>
              <div class="field-input">
                <p-inputNumber
                  formControlName="maxStrikes"
                  [showButtons]="true"
                  [min]="0"
                  [step]="1"
                  [minFractionDigits]="0"
                  [maxFractionDigits]="0"
                  buttonLayout="horizontal"
                >
                </p-inputNumber>
                <small *ngIf="hasNestedError('failedImport', 'maxStrikes', 'required')" class="form-error-text">This field is required</small>
                <small *ngIf="hasNestedError('failedImport', 'maxStrikes', 'max')" class="form-error-text">Value cannot exceed 5000</small>
                <small class="form-helper-text">Number of strikes before action is taken (0 to disable, min 3 to enable)</small>
              </div>
            </div>

            <div class="field-row" formGroupName="failedImport">
              <label class="field-label">
                <i class="pi pi-question-circle field-info-icon" 
                   (click)="openFieldDocs('failedImport.ignorePrivate')" 
                   title="Click for documentation"></i>
                Ignore Private
              </label>
              <div class="field-input">
                <p-checkbox formControlName="ignorePrivate" [binary]="true"></p-checkbox>
                <small class="form-helper-text">When enabled, private torrents will not be checked for being failed imports</small>
              </div>
            </div>

            <div class="field-row" formGroupName="failedImport">
              <label class="field-label">
                <i class="pi pi-question-circle field-info-icon"
                   (click)="openFieldDocs('failedImport.deletePrivate')"
                   title="Click for documentation"></i>
                Delete Private from client
              </label>
              <div class="field-input">
                <p-checkbox formControlName="deletePrivate" [binary]="true"></p-checkbox>
                <small class="form-helper-text">Disable this if you want to keep private torrents in the download client even if they are removed from the arrs</small>
              </div>
            </div>

            <div class="field-row" formGroupName="failedImport">
              <label class="field-label">
                <i class="pi pi-question-circle field-info-icon"
                   (click)="openFieldDocs('failedImport.skipIfNotFoundInClient')"
                   title="Click for documentation"></i>
                Skip If Not Found In Client
              </label>
              <div class="field-input">
                <p-checkbox formControlName="skipIfNotFoundInClient" [binary]="true"></p-checkbox>
                <small class="form-helper-text">Skip failed import check for torrents not found in any enabled torrent client</small>
              </div>
            </div>

            <div class="field-row" formGroupName="failedImport">
              <label class="field-label">
                <i class="pi pi-question-circle field-info-icon" 
                   (click)="openFieldDocs('failedImport.pattern-mode')" 
                   title="Click for documentation"></i>
                Pattern Mode
              </label>
              <div class="field-input">
                <p-selectButton
                  formControlName="patternMode"
                  [options]="[{ label: PatternMode.Include, value: PatternMode.Include }, { label: PatternMode.Exclude, value: PatternMode.Exclude }]"
                  optionLabel="label"
                  optionValue="value"
                  [allowEmpty]="false"
                  [multiple]="false"
                ></p-selectButton>
                <small class="form-helper-text">Choose how the patterns are applied to failed imports</small>
              </div>
            </div>

            <div class="field-row" formGroupName="failedImport">
              <label class="field-label">
                <i class="pi pi-question-circle field-info-icon"
                   (click)="openFieldDocs('failedImport.patterns')"
                   title="Click for documentation"></i>
                {{ queueCleanerForm.get('failedImport.patternMode')?.value === PatternMode.Include ? 'Included Patterns' : 'Excluded Patterns' }}
              </label>
              <div class="field-input">
                <app-mobile-autocomplete
                  formControlName="patterns"
                  placeholder="Add pattern"
                ></app-mobile-autocomplete>
                <small *ngIf="hasNestedError('failedImport', 'patterns', 'patternsRequired')" class="form-error-text">At least one pattern is required when using Include mode</small>
                <small class="form-helper-text">
                  {{ queueCleanerForm.get('failedImport.patternMode')?.value === PatternMode.Include ?
                    'Only failed imports containing these patterns will be removed and everything else will be skipped' :
                    'Failed imports containing these patterns will be skipped and everything else will be removed'
                  }}
                </small>
              </div>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

        <!-- Downloading Metadata Settings -->
        <p-accordion-panel [disabled]="!queueCleanerForm.get('enabled')?.value" [value]="2">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Downloading Metadata Settings (qBittorrent only)
              @if (sectionHasErrors(2)) {
                <i class="pi pi-exclamation-circle accordion-error-icon" title="This section has validation errors"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <div class="field-row">
              <label class="field-label">
                <i class="pi pi-question-circle field-info-icon" 
                   (click)="openFieldDocs('downloadingMetadataMaxStrikes')" 
                   title="Click for documentation"></i>
                Max Strikes for Downloading Metadata
              </label>
              <div class="field-input">
                <p-inputNumber
                  formControlName="downloadingMetadataMaxStrikes"
                  [showButtons]="true"
                  [min]="0"
                  [step]="1"
                  [minFractionDigits]="0"
                  [maxFractionDigits]="0"
                  buttonLayout="horizontal"
                >
                </p-inputNumber>
                <small *ngIf="hasMainFormError('downloadingMetadataMaxStrikes', 'required')" class="form-error-text">This field is required</small>
                <small *ngIf="hasMainFormError('downloadingMetadataMaxStrikes', 'max')" class="form-error-text">Value cannot exceed 5000</small>
                <small class="form-helper-text">Number of strikes before action is taken (0 to disable, min 3 to enable)</small>
              </div>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

        <!-- Stall Rules Management -->
        <p-accordion-panel [disabled]="!queueCleanerForm.get('enabled')?.value" [value]="4">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Stalled Download Rules
              @if (sectionHasErrors(4)) {
                <i class="pi pi-exclamation-triangle accordion-error-icon" title="Coverage gaps detected"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <!-- Coverage Analysis Warning -->
            <div *ngIf="stallRulesCoverage.hasGaps" class="coverage-info mb-3 p-3 border-1 surface-border border-round">
              <div class="flex align-items-start gap-2">
                <i class="pi pi-exclamation-triangle text-orange-500 mt-1"></i>
                <div>
                  <h4 class="m-0 mb-2 text-orange-700">Coverage Gaps Detected</h4>
                  <p class="m-0 mb-2 text-sm text-600">
                    Your stall rules don't cover all completion percentage ranges for all privacy types.
                    Torrents in uncovered ranges won't be processed by stall rules.
                  </p>
                  <div class="coverage-gaps">
                    <div *ngFor="let gap of stallRulesCoverage.gaps" class="gap-item text-sm">
                      <strong>{{ gap.privacyTypeLabel }} torrents:</strong> {{ gap.start }}% - {{ gap.end }}% completion not covered
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Rules List -->
            <div *ngIf="stallRulesCount > 0" class="items-list">
              <div
                *ngFor="let rule of stallRules(); trackBy: trackStallRule"
                class="item-item p-3 border-round surface-border border-1 mb-3"
                [ngClass]="{ 'enabled': rule.enabled }"
              >
                <div class="flex justify-content-between align-items-start flex-wrap gap-3">
                  <div class="item-info flex-1">
                    <div>
                      <div class="flex align-items-center flex-wrap gap-2 mb-2">
                        <h4 class="m-0">{{ rule.name }}</h4>
                        <p-tag value="Stall Rule" severity="info"></p-tag>
                        <p-tag
                          [value]="rule.enabled ? 'Enabled' : 'Disabled'"
                          [severity]="rule.enabled ? 'success' : 'secondary'"
                        ></p-tag>
                        <p-tag [value]="getPrivacyLabel(rule.privacyType) | titlecase" severity="info"></p-tag>
                      </div>
                      <div class="item-details">
                        <span>Completion Range: {{ rule.minCompletionPercentage }}% - {{ rule.maxCompletionPercentage }}%</span>
                        <span>Max Strikes: {{ rule.maxStrikes }}</span>
                        <span>Reset on Progress: {{ rule.resetStrikesOnProgress ? 'Yes' : 'No' }}</span>
                        <span *ngIf="rule.minimumProgress">Minimum Progress: {{ rule.minimumProgress }}</span>
                        <span *ngIf="rule.privacyType === torrentPrivacyType.Private || rule.privacyType === torrentPrivacyType.Both">
                          Delete Private: {{ rule.deletePrivateTorrentsFromClient ? 'Yes' : 'No' }}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="item-actions">
                    <button
                      pButton
                      type="button"
                      icon="pi pi-pencil"
                      class="p-button-rounded p-button-text p-button-sm"
                      [disabled]="queueCleanerSaving()"
                      (click)="editStallRule(rule)"
                      pTooltip="Edit rule"
                    ></button>
                    <button
                      pButton
                      type="button"
                      icon="pi pi-trash"
                      class="p-button-rounded p-button-text p-button-danger p-button-sm"
                      [disabled]="queueCleanerSaving()"
                      (click)="deleteStallRule(rule)"
                      pTooltip="Delete rule"
                    ></button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Empty state when no rules -->
            <div
              *ngIf="stallRulesCount === 0"
              class="no-items text-center py-5 text-color-secondary"
            >
              <i class="pi pi-pause text-4xl mb-3"></i>
              <p class="m-0">No stalled download rules defined.</p>
              <small>Add a rule to customize stall detection.</small>
            </div>

            <!-- Action buttons -->
            <div class="card-footer mt-3">
              <button
                pButton
                type="button"
                icon="pi pi-plus"
                label="Add Rule"
                class="p-button-outlined"
                [disabled]="queueCleanerForm.get('enabled')?.value === false"
                (click)="openStallRulesModal()"
              ></button>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

        <!-- Slow Rules Management -->
        <p-accordion-panel [disabled]="!queueCleanerForm.get('enabled')?.value" [value]="5">
          <p-accordion-header>
            <ng-template #toggleicon let-active="active">
              @if (active) {
                <i class="pi pi-chevron-up"></i>
              } @else {
                <i class="pi pi-chevron-down"></i>
              }
            </ng-template>
            <span class="accordion-header-title">
              Slow Download Rules
              @if (sectionHasErrors(5)) {
                <i class="pi pi-exclamation-triangle accordion-error-icon" title="Coverage gaps detected"></i>
              }
            </span>
          </p-accordion-header>
          <p-accordion-content>
            <!-- Coverage Analysis Warning -->
            <div *ngIf="slowRulesCoverage.hasGaps" class="coverage-info mb-3 p-3 border-1 surface-border border-round">
              <div class="flex align-items-start gap-2">
                <i class="pi pi-exclamation-triangle text-orange-500 mt-1"></i>
                <div>
                  <h4 class="m-0 mb-2 text-orange-700">Coverage Gaps Detected</h4>
                  <p class="m-0 mb-2 text-sm text-600">
                    Your slow rules don't cover all completion percentage ranges for all privacy types.
                    Torrents in uncovered ranges won't be processed by slow rules.
                  </p>
                  <div class="coverage-gaps">
                    <div *ngFor="let gap of slowRulesCoverage.gaps" class="gap-item text-sm">
                      <strong>{{ gap.privacyTypeLabel }} torrents:</strong> {{ gap.start }}% - {{ gap.end }}% completion not covered
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Rules List -->
            <div *ngIf="slowRulesCount > 0" class="items-list">
              <div
                *ngFor="let rule of slowRules(); trackBy: trackSlowRule"
                class="item-item p-3 border-round surface-border border-1 mb-3"
                [ngClass]="{ 'enabled': rule.enabled }"
              >
                <div class="flex justify-content-between align-items-start flex-wrap gap-3">
                  <div class="item-info flex-1">
                    <div>
                      <div class="flex align-items-center flex-wrap gap-2 mb-2">
                        <h4 class="m-0">{{ rule.name }}</h4>
                        <p-tag value="Slow Rule" severity="info"></p-tag>
                        <p-tag
                          [value]="rule.enabled ? 'Enabled' : 'Disabled'"
                          [severity]="rule.enabled ? 'success' : 'secondary'"
                        ></p-tag>
                        <p-tag [value]="getPrivacyLabel(rule.privacyType) | titlecase" severity="info"></p-tag>
                      </div>
                      <div class="item-details">
                        <span>Max Strikes: {{ rule.maxStrikes }}</span>
                        <span>Completion Range: {{ rule.minCompletionPercentage }}% - {{ rule.maxCompletionPercentage }}%</span>
                        <span *ngIf="rule.minSpeed">Min Speed: {{ rule.minSpeed }}</span>
                        <span *ngIf="rule.maxTimeHours && rule.maxTimeHours > 0">Max Time: {{ rule.maxTimeHours }}h</span>
                        <span>Reset on Progress: {{ rule.resetStrikesOnProgress ? 'Yes' : 'No' }}</span>
                        <span *ngIf="rule.ignoreAboveSize">Ignore Above Size: {{ rule.ignoreAboveSize }}</span>
                        <span *ngIf="rule.privacyType === torrentPrivacyType.Private || rule.privacyType === torrentPrivacyType.Both">
                          Delete Private: {{ rule.deletePrivateTorrentsFromClient ? 'Yes' : 'No' }}
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="item-actions">
                    <button
                      pButton
                      type="button"
                      icon="pi pi-pencil"
                      class="p-button-rounded p-button-text p-button-sm"
                      [disabled]="queueCleanerSaving()"
                      (click)="editSlowRule(rule)"
                      pTooltip="Edit rule"
                    ></button>
                    <button
                      pButton
                      type="button"
                      icon="pi pi-trash"
                      class="p-button-rounded p-button-text p-button-danger p-button-sm"
                      [disabled]="queueCleanerSaving()"
                      (click)="deleteSlowRule(rule)"
                      pTooltip="Delete rule"
                    ></button>
                  </div>
                </div>
              </div>
            </div>

            <!-- Empty state when no rules -->
            <div
              *ngIf="slowRulesCount === 0"
              class="no-items text-center py-5 text-color-secondary"
            >
              <i class="pi pi-clock text-4xl mb-3"></i>
              <p class="m-0">No slow download rules defined.</p>
              <small>Add a rule to customize slow download detection.</small>
            </div>

            <!-- Action buttons -->
            <div class="card-footer mt-3">
              <button
                pButton
                type="button"
                icon="pi pi-plus"
                label="Add Rule"
                class="p-button-outlined"
                [disabled]="queueCleanerForm.get('enabled')?.value === false"
                (click)="openSlowRulesModal()"
              ></button>
            </div>
          </p-accordion-content>
        </p-accordion-panel>

      </p-accordion>

      <!-- Action buttons -->
      <div class="card-footer mt-3">
        <button
          pButton
          type="button"
          label="Save"
          icon="pi pi-save"
          class="p-button-primary"
          [disabled]="(!queueCleanerForm.dirty || !hasActualChanges) || queueCleanerForm.invalid || queueCleanerSaving()"
          [loading]="queueCleanerSaving()"
          (click)="saveQueueCleanerConfig()"
        ></button>
        <button
          pButton
          type="button"
          label="Reset"
          icon="pi pi-refresh"
          class="p-button-secondary p-button-outlined ml-2"
          (click)="resetQueueCleanerConfig()"
        ></button>
      </div>
    </div>
  </p-card>
  </form>
</div>

<!-- Stall Rules Modal -->
<p-dialog 
  [(visible)]="stallRuleModalVisible" 
  [modal]="true" 
  [closable]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="instance-modal"
  header="{{ editingStallRule ? 'Edit Stall Rule' : 'Add Stall Rule' }}"
  (onHide)="closeStallRuleModal()"
>
  <form [formGroup]="stallRuleForm" class="p-fluid instance-form">
    <div class="field">
      <label for="stall-rule-name">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.name')"
           title="Click for documentation"></i>
        Name
      </label>
      <input
        id="stall-rule-name"
        type="text"
        pInputText
        formControlName="name"
        placeholder="My Stall Rule"
        class="w-full"
      />
      <small *ngIf="hasModalError(stallRuleForm, 'name', 'required')" class="form-error-text">Name is required</small>
      <small *ngIf="hasModalError(stallRuleForm, 'name', 'maxlength')" class="form-error-text">Name cannot exceed 100 characters</small>
    </div>

    <div class="field flex flex-row">
      <label class="field-label">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.enabled')"
           title="Click for documentation"></i>
        Enabled
      </label>
      <div class="field-input">
        <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Enable this rule</small>
      </div>
    </div>

    <div class="field">
      <label for="stall-rule-strikes">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.maxStrikes')"
           title="Click for documentation"></i>
        Max Strikes
      </label>
      <p-inputNumber
        id="stall-rule-strikes"
        formControlName="maxStrikes"
        [showButtons]="true"
        buttonLayout="horizontal"
        class="w-full"
      ></p-inputNumber>
      <small *ngIf="hasModalError(stallRuleForm, 'maxStrikes', 'required')" class="form-error-text">Max strikes is required</small>
      <small *ngIf="hasModalError(stallRuleForm, 'maxStrikes', 'min')" class="form-error-text">Min value is 3</small>
      <small *ngIf="hasModalError(stallRuleForm, 'maxStrikes', 'max')" class="form-error-text">Max value is 5000</small>
      <small class="form-helper-text">Number of strikes before action is taken</small>
    </div>

    <div class="field">
      <label for="stall-rule-privacy-type">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.privacyType')"
           title="Click for documentation"></i>
        Privacy Type
      </label>
      <p-select
        id="stall-rule-privacy-type"
        formControlName="privacyType"
        [options]="privacyTypeOptions"
        optionLabel="label"
        optionValue="value"
        placeholder="Select privacy type"
        class="w-full"
      ></p-select>
      <small *ngIf="hasModalError(stallRuleForm, 'privacyType', 'required')" class="form-error-text">Privacy type is required</small>
      <small class="form-helper-text">Which torrent types this rule applies to</small>
    </div>

    <div class="field">
      <label for="stall-rule-min-completion">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.completionRange')"
           title="Click for documentation"></i>
        Min Completion Percentage
      </label>
      <p-inputNumber
        id="stall-rule-min-completion"
        formControlName="minCompletionPercentage"
        [step]="1"
        [minFractionDigits]="0"
        [maxFractionDigits]="0"
        suffix="%"
        placeholder="Percentage"
        class="w-full"
      ></p-inputNumber>
      <small *ngIf="hasModalError(stallRuleForm, 'minCompletionPercentage', 'required')" class="form-error-text">Percentage is required</small>
      <small *ngIf="hasModalError(stallRuleForm, 'minCompletionPercentage', 'min')" class="form-error-text">Percentage cannot be negative</small>
      <small *ngIf="hasModalError(stallRuleForm, 'minCompletionPercentage', 'max')" class="form-error-text">Percentage cannot exceed 100</small>
      <small class="form-helper-text">Apply the rule once completion percentage exceeds this value</small>
      <small class="form-helper-text">Example: A value of 20 includes items above 20% (20 is not included)</small>
      <small class="form-helper-text">A value of 0 includes items at 0% and above</small>
    </div>

    <div class="field">
      <label for="stall-rule-max-completion">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.completionRange')"
           title="Click for documentation"></i>
        Max Completion Percentage
      </label>
      <p-inputNumber
        id="stall-rule-max-completion"
        formControlName="maxCompletionPercentage"
        [step]="1"
        [minFractionDigits]="0"
        [maxFractionDigits]="0"
        suffix="%"
        placeholder="Percentage"
        class="w-full"
      ></p-inputNumber>
      <small *ngIf="hasModalError(stallRuleForm, 'maxCompletionPercentage', 'required')" class="form-error-text">Percentage is required</small>
      <small *ngIf="hasModalError(stallRuleForm, 'maxCompletionPercentage', 'min')" class="form-error-text">Percentage cannot be negative</small>
      <small *ngIf="hasModalError(stallRuleForm, 'maxCompletionPercentage', 'max')" class="form-error-text">Percentage cannot exceed 100</small>
      <small *ngIf="hasModalError(stallRuleForm, 'maxCompletionPercentage', 'minGreaterThanMax')" class="form-error-text">Max percentage must be greater than or equal to Min percentage</small>
      <small class="form-helper-text">Apply the rule to items with a completion percentage less than or equal to this value</small>
      <small class="form-helper-text">Example: A value of 80 includes items at 80% and below</small>
    </div>

    <div class="field flex flex-row">
      <label class="field-label">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.resetStrikesOnProgress')"
           title="Click for documentation"></i>
        Reset Strikes on Progress
      </label>
      <div class="field-input">
        <p-checkbox formControlName="resetStrikesOnProgress" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Reset strike count when torrent shows progress</small>
      </div>
    </div>

    <div class="field">
      <label for="stall-rule-min-progress">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.minimumProgress')"
           title="Click for documentation"></i>
        Minimum Progress to Reset
      </label>
      <app-byte-size-input
        id="stall-rule-min-progress"
        formControlName="minimumProgress"
        placeholder="Enter minimum progress"
        helpText="Only reset strikes after the torrent downloads at least this amount. Leave blank to reset on any progress."
        type="smallSize"
      >
      </app-byte-size-input>
    </div>

    <div class="field flex flex-row">
      <label class="field-label">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('stallRule.deletePrivateTorrentsFromClient')"
           title="Click for documentation"></i>
        Delete Private from Client
      </label>
      <div class="field-input">
        <p-checkbox formControlName="deletePrivateTorrentsFromClient" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Disable this if you want to keep private torrents in the download client even if they are removed from the arrs</small>
      </div>
    </div>
  </form>

  <ng-template pTemplate="footer">
    <div class="modal-footer">
      <button 
        pButton 
        type="button" 
        label="Cancel" 
        class="p-button-text"
        (click)="closeStallRuleModal()"
      ></button>
      <button 
        pButton 
        type="button" 
        label="{{ editingStallRule ? 'Update' : 'Save' }}" 
        icon="pi pi-save"
        class="p-button-primary ml-2"
        [disabled]="stallRuleForm.invalid || stallRuleSaving"
        [loading]="stallRuleSaving"
        (click)="saveStallRule()"
      ></button>
    </div>
  </ng-template>
</p-dialog>

<!-- Slow Rules Modal -->
<p-dialog 
  [(visible)]="slowRuleModalVisible" 
  [modal]="true" 
  [closable]="true"
  [draggable]="false"
  [resizable]="false"
  styleClass="instance-modal"
  header="{{ editingSlowRule ? 'Edit Slow Rule' : 'Add Slow Rule' }}"
  (onHide)="closeSlowRuleModal()"
>
  <form [formGroup]="slowRuleForm" class="p-fluid instance-form">
    <div class="field">
      <label for="slow-rule-name">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.name')"
           title="Click for documentation"></i>
        Name
      </label>
      <input
        id="slow-rule-name"
        type="text"
        pInputText
        formControlName="name"
        placeholder="My Slow Rule"
        class="w-full"
      />
      <small *ngIf="hasModalError(slowRuleForm, 'name', 'required')" class="form-error-text">Name is required</small>
      <small *ngIf="hasModalError(slowRuleForm, 'name', 'maxlength')" class="form-error-text">Name cannot exceed 100 characters</small>
    </div>

    <div class="field flex flex-row">
      <label class="field-label">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.enabled')"
           title="Click for documentation"></i>
        Enabled
      </label>
      <div class="field-input">
        <p-checkbox formControlName="enabled" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Enable this rule</small>
      </div>
    </div>

    <div class="field">
      <label for="slow-rule-strikes">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.maxStrikes')"
           title="Click for documentation"></i>
        Max Strikes
      </label>
      <p-inputNumber
        id="slow-rule-strikes"
        formControlName="maxStrikes"
        [showButtons]="true"
        buttonLayout="horizontal"
        class="w-full"
      ></p-inputNumber>
      <small *ngIf="hasModalError(slowRuleForm, 'maxStrikes', 'required')" class="form-error-text">Max strikes is required</small>
      <small *ngIf="hasModalError(slowRuleForm, 'maxStrikes', 'min')" class="form-error-text">Min value is 3</small>
      <small *ngIf="hasModalError(slowRuleForm, 'maxStrikes', 'max')" class="form-error-text">Max value is 5000</small>
      <small class="form-helper-text">Number of strikes before action is taken</small>
    </div>

    <div class="field">
      <label for="slow-rule-speed">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.minSpeed')"
           title="Click for documentation"></i>
        Min Speed
      </label>
      <app-byte-size-input
        formControlName="minSpeed"
        placeholder="Enter minimum speed"
        helpText="Minimum speed threshold for slow downloads (e.g., 100KB/s)"
        type="speed"
      >
      </app-byte-size-input>
      <small *ngIf="hasModalError(slowRuleForm, 'minSpeed', 'required')" class="form-error-text">Minimum speed is required</small>
    </div>

    <div class="field">
      <label for="slow-rule-max-time">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.maxTimeHours')"
           title="Click for documentation"></i>
        Maximum Time (Hours)
      </label>
      <p-inputNumber
        formControlName="maxTimeHours"
        id="slow-rule-max-time"
        placeholder="Maximum download time in hours"
        [showButtons]="true"
        [step]="1"
        class="w-full"
      ></p-inputNumber>
      <small *ngIf="hasModalError(slowRuleForm, 'maxTimeHours', 'required')" class="form-error-text">Maximum time is required</small>
      <small *ngIf="hasModalError(slowRuleForm, 'maxTimeHours', 'min')" class="form-error-text">Min value is 0</small>
      <small class="form-helper-text">Maximum time allowed for slow downloads (0 means disabled)</small>
    </div>

    <div class="field">
      <label for="slow-rule-privacy-type">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.privacyType')"
           title="Click for documentation"></i>
        Privacy Type
      </label>
      <p-select
        id="slow-rule-privacy-type"
        formControlName="privacyType"
        [options]="privacyTypeOptions"
        optionLabel="label"
        optionValue="value"
        placeholder="Select privacy type"
        class="w-full"
      ></p-select>
      <small *ngIf="hasModalError(slowRuleForm, 'privacyType', 'required')" class="form-error-text">Privacy type is required</small>
      <small class="form-helper-text">Which torrent types this rule applies to</small>
    </div>

    <div class="field">
      <label for="slow-rule-min-completion">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.completionRange')"
           title="Click for documentation"></i>
        Min Completion %
      </label>
      <p-inputNumber
        formControlName="minCompletionPercentage"
        id="slow-rule-min-completion"
        placeholder="Minimum completion percentage"
        [showButtons]="true"
        [step]="1"
        suffix="%"
        class="w-full"
      ></p-inputNumber>
      <small *ngIf="hasModalError(slowRuleForm, 'minCompletionPercentage', 'required')" class="form-error-text">Percentage is required</small>
      <small *ngIf="hasModalError(slowRuleForm, 'minCompletionPercentage', 'min')" class="form-error-text">Percentage cannot be negative</small>
      <small *ngIf="hasModalError(slowRuleForm, 'minCompletionPercentage', 'max')" class="form-error-text">Percentage cannot exceed 100</small>
      <small class="form-helper-text">Apply the rule once completion percentage exceeds this value (0 still includes exactly 0%)</small>
    </div>

    <div class="field">
      <label for="slow-rule-max-completion">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.completionRange')"
           title="Click for documentation"></i>
        Max Completion %
      </label>
      <p-inputNumber
        formControlName="maxCompletionPercentage"
        id="slow-rule-max-completion"
        placeholder="Maximum completion percentage"
        [showButtons]="true"
        [step]="1"
        suffix="%"
        class="w-full"
      ></p-inputNumber>
      <small *ngIf="hasModalError(slowRuleForm, 'maxCompletionPercentage', 'required')" class="form-error-text">Percentage is required</small>
      <small *ngIf="hasModalError(slowRuleForm, 'maxCompletionPercentage', 'min')" class="form-error-text">Percentage cannot be negative</small>
      <small *ngIf="hasModalError(slowRuleForm, 'maxCompletionPercentage', 'max')" class="form-error-text">Percentage cannot exceed 100</small>
      <small *ngIf="hasModalError(slowRuleForm, 'maxCompletionPercentage', 'minGreaterThanMax')" class="form-error-text">Max percentage must be greater than or equal to Min percentage</small>
      <small class="form-helper-text">Apply the rule up to and including this completion percentage</small>
    </div>

    <div class="field">
      <label for="slow-rule-ignore-above-size">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.ignoreAboveSize')"
           title="Click for documentation"></i>
        Ignore Above Size
      </label>
      <app-byte-size-input
        formControlName="ignoreAboveSize"
        [min]="0"
        placeholder="Enter size threshold"
        helpText="Downloads will be ignored if size exceeds, e.g., 25 GB"
        type="size"
      >
      </app-byte-size-input>
    </div>

    <div class="field flex flex-row">
      <label class="field-label">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.resetStrikesOnProgress')"
           title="Click for documentation"></i>
        Reset Strikes on Progress
      </label>
      <div class="field-input">
        <p-checkbox formControlName="resetStrikesOnProgress" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Reset strike count when torrent shows progress</small>
      </div>
    </div>

    <div class="field flex flex-row">
      <label class="field-label">
        <i class="pi pi-question-circle field-info-icon"
           (click)="openFieldDocs('slowRule.deletePrivateTorrentsFromClient')"
           title="Click for documentation"></i>
        Delete Private from Client
      </label>
      <div class="field-input">
        <p-checkbox formControlName="deletePrivateTorrentsFromClient" [binary]="true"></p-checkbox>
        <small class="form-helper-text">Disable this if you want to keep private torrents in the download client even if they are removed from the arrs</small>
      </div>
    </div>
  </form>

  <ng-template pTemplate="footer">
    <div class="modal-footer">
      <button 
        pButton 
        type="button" 
        label="Cancel" 
        class="p-button-text"
        (click)="closeSlowRuleModal()"
      ></button>
      <button 
        pButton 
        type="button" 
        label="{{ editingSlowRule ? 'Update' : 'Save' }}" 
        icon="pi pi-save"
        class="p-button-primary ml-2"
        [disabled]="slowRuleForm.invalid || slowRuleSaving"
        [loading]="slowRuleSaving"
        (click)="saveSlowRule()"
      ></button>
    </div>
  </ng-template>
</p-dialog>

<!-- Confirmation Dialog -->
<p-confirmDialog
  rejectButtonStyleClass="p-button-text">
</p-confirmDialog>
